<template>
  <div class="dashboard-container">
    <el-row :gutter="20" type="flex">
      <el-col>
        <el-card style="width:740px;height:240px">
          <div slot="header" class="clearfix">
            <span><strong>机构概述</strong></span>
          </div>
          <el-row type="flex" justify="space-between">
            <el-col class="left">
              <p>{{ organOverview.organName }}</p>
              <p style="color:rbg(161, 176, 196);">地址:&nbsp;{{ organOverview.organAddress }}</p>
              <p>负责人:&nbsp;{{ organOverview.principal }}{{ organOverview.phone }}</p>
              <el-button type="primary" class="distributeBtn">查看营业部分布</el-button>
            </el-col>
            <el-col>
              <el-row type="flex">
                <el-col>
                  <div>分拣中心(个)</div>
                  <h2>{{ organOverview.sortingCenterNumber }}</h2>
                </el-col>
                <el-col>
                  <div>营业部(个)</div>
                  <h2>{{ organOverview.agencyNumber }}</h2>
                </el-col>
              </el-row>

              <el-row type="flex">
                <el-col>
                  <div>司机人数(个)</div>
                  <h2>{{ organOverview.driverNumber }}</h2>
                </el-col>
                <el-col>
                  <div>快递员人数(个)</div>
                  <h2>{{ organOverview.courierNumber }}</h2>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span><strong>今日数据</strong></span>
            <span style="float: right; padding: 3px 0;cursor:pointer;"><i class="el-icon-refresh" style="color:red;" /> &nbsp;{{ date }}</span>
          </div>
          <el-row type="flex">
            <el-col :span="10">
              <p>订单金额(元)</p>
              <count-to
                :start-val="0"
                :end-val="todayData.orderAmount"
                :duration="1000"
                style="font-size: 36px;color: #20232a;font-weight: 700;margin-bottom: 24px;"
              />
              <p>较昨日&nbsp;+{{ todayData.orderAmountChanges }}<i class="el-icon-top" style="color:red;" /></p>
            </el-col>
            <el-col :span="10">
              <p>订单数量(笔)</p>
              <count-to
                :start-val="0"
                style="font-size: 36px;color: #20232a;font-weight: 700;margin-bottom: 24px;"
                :end-val="todayData.orderNumber"
                :duration="1000"
              />
              <p>较昨日&nbsp;+{{ todayData.orderNumberChanges }}<i class="el-icon-top" style="color:red;" /></p>
            </el-col>
            <el-col :span="8">
              <p>运输次数(次)</p>
              <count-to
                :start-val="0"
                style="font-size: 36px;color: #20232a;font-weight: 700;margin-bottom: 24px;"
                :end-val="todayData.transportTaskNumber"
                :duration="1000"
              />
              <p>较昨日&nbsp;+{{ todayData.transportTaskNumberChanges }}<i class="el-icon-top" style="color:red;" /></p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col>
        <el-card>
          <div slot="header" class="clearfix">
            <span><strong>待办任务</strong>
              <el-popover
                placement="top-start"
                width="440"
                trigger="hover"
                content="待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件---待派送率=待派送/(待派送+派送中+已签收+拒收)-------------------未分配率=未分配/全部数据-----------------------------------------------超时率=超时任务/(已完成+进行中+已取消）"
              >
                <el-button slot="reference" style="border:0"><i class="el-icon-warning-outline" /></el-button>
              </el-popover>
            </span>
            <span style="float: right; padding: 3px 0;cursor:pointer;"><i class="el-icon-refresh" style="color:red;" /> &nbsp;{{ date }}&nbsp;--&nbsp;{{ date }}</span>
          </div>
          <div>
            <el-row type="flex">
              <el-col>
                <div class="chart">
                  <div ref="waitTo" style=" width: 175px; height:200px " />
                  <strong style="margin-left:50px;">待取件 <span style="color:#e26145">{{ homeData.waitingPickupNumber }}</span></strong>
                </div>

              </el-col>
              <el-col>
                <div class="chart">
                  <div ref="waitingDispatch" style=" width: 175px; height:200px " />
                  <strong style="margin-left:50px;"> 待派件 <span style="color:#fdc462">{{ homeData.waitingDispatchNumber }}</span></strong>
                </div>
              </el-col>
              <el-col>
                <div class="chart">
                  <div ref="unassignedTransport" style=" width: 175px; height:200px " />
                  <strong style="margin-left:50px;"> 未分配运输 <span style="color:#fd9d47">{{ homeData.unassignedTransportTaskNumber }}</span></strong>
                </div>
              </el-col>

              <el-col>
                <div class="chart">
                  <div ref="timeoutTransportTask" style=" width: 175px; height:200px " />
                  <strong style="margin-left:50px;"> 超时运输 <span style="color:#f5ec98">{{ homeData.timeoutTransportTaskNumber }}</span></strong>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>
              <strong>执行中任务</strong>
              <el-popover
                placement="top-start"
                width="500"
                trigger="hover"
                content="运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）-------派送率=派送中/(待派送+派送中+已签收+拒收）"
              >
                <el-button slot="reference" style="border:0"><i class="el-icon-warning-outline" /></el-button>
              </el-popover>
            </span>
            <span style="float: right; padding: 3px 0;cursor:pointer;"><i class="el-icon-refresh" style="color:red;" /> &nbsp;{{ date }}</span>
          </div>
          <div>
            <el-row type="flex">
              <el-col>
                <div class="chart">
                  <div ref="taskInTransit" style=" width: 190px; height:200px " />
                  <strong style="margin-left:60px;">运输中 <span style="color:#e26145">{{ todayData.taskInTransitNumber }}</span></strong>
                </div>
              </el-col>
              <el-col>
                <div class="chart">
                  <div ref="taskInDelivery" style=" width: 190px; height:200px " />
                  <strong style="margin-left:60px;"> 派送中 <span style="color:#fdc462">{{ todayData.taskInDeliveryNumber }}</span></strong>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col>
        <el-card>
          <div slot="header" class="clearfix">
            <strong>常用功能</strong>
          </div>
          <el-row type="flex">
            <el-col class="flex redBtn" @click="$router.push(`/transport/task-detail`)"><img style=" cursor:pointer;" src="../../assets/operation.png" alt=""><strong> 快递作业</strong></el-col>
            <el-col class="flex redBtn"><img style=" cursor:pointer;" src="../../assets/transportation.png" alt="" @click="$router.push('/dispatch/transport')"><strong>运输任务</strong> </el-col>
            <el-col class="flex redBtn"><img style=" cursor:pointer;" src="../../assets/line.png" alt="" @click="$router.push('/dispatch/line')"><strong>线路管理</strong> </el-col>
            <el-col class="flex redBtn"><img style=" cursor:pointer;" src="../../assets/car.png" alt="" @click="$router.push('/car/carList')"> <strong>车辆管理</strong></el-col>
            <el-col class="flex redBtn"><img style=" cursor:pointer;" src="../../assets/drive.png" alt="" @click="$router.push('/employee/driver')"><strong>司机管理</strong></el-col>
            <el-col class="flex redBtn"><img style=" cursor:pointer;" src="../../assets/freight.png" alt="" @click="$router.push('/basic/freight')"><strong>运费查询</strong></el-col>

          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col>
        <el-card style=" width: 610px; height:460px ">
          <div slot="header" class="clearfix">
            <strong>线路管理</strong>
          </div>
          <div>
            <div class="chart">
              <div ref="lineChart" style=" width: 580px; height:550px " />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card style=" width: 605px; height:460px ">
          <div slot="header" class="clearfix">
            <strong>运输任务</strong>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="运单编号"
              width="130"
              show-overflow-tooltip
            />
            <el-table-column
              prop="startAgency"
              label="起始地"
              width="120"
            />
            <el-table-column
              prop="endAgency"
              label="目的地"
              width="120"
            />
            <el-table-column
              prop="licensePlate"
              label="车辆"
              width="120"
            />
            <el-table-column
              prop="status"
              label="任务状态"
              width="120"
            />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex">
      <el-col>
        <el-card style=" width: 610px;">
          <div slot="header" class="clearfix">
            <span>订单总量<br>单位:笔</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-row>
            <el-row type="flex">
              <el-col> <span style="color:#e26145; padding-left: 60px; font-size:24px; font-weight: 700;">
                <count-to
                  :start-val="0"
                  :end-val="monthlyOrderList.orderMaxNumber"
                  :duration="2000"
                />
              </span> <p>订单最高值</p></el-col>
              <el-col> <span style="color:#e26145; padding-left: 60px; font-size:24px; font-weight: 700;">
                <count-to
                  :start-val="0"
                  :end-val="monthlyOrderList.orderAverageNumber"
                  :duration="2000"
                />
              </span> <p>订单平均值</p></el-col>
              <el-col> <span style="color:#e26145; padding-left: 60px; font-size:24px; font-weight: 700;">
                <count-to
                  :start-val="0"
                  :end-val="monthlyOrderList.orderMinNumber"
                  :duration="2000"
                />
              </span> <p>订单最低值</p></el-col>
            </el-row>
            <el-col>
              <div class="chart">
                <div ref="allOrder" style=" width: 560px; height:500px " />
              </div>
            </el-col>
          </el-row>

        </el-card>
      </el-col>
      <el-col>
        <el-card style=" width: 610px;">
          <div slot="header" class="clearfix">
            <span>订单分布</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div>
            <div class="chart">
              <div ref="orderForm" style=" width: 580px; height:550px " />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getWorkspaceAPI } from '@/api/dashboard'
import { mapGetters } from 'vuex'
import CountTo from 'vue-count-to'
// import * as echarts from 'echarts'
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart, MapChart, LinesChart, EffectScatterChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  VisualMapComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import 'echarts-liquidfill'
import chinaMap from '@/assets/json/china.json'
echarts.use([
  LineChart,
  CanvasRenderer,
  BarChart,
  PieChart,
  MapChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  VisualMapComponent,
  LinesChart,
  EffectScatterChart,
  LegendComponent
])
export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      orderLineChart: {},
      organOverview: {},
      todayData: {},
      date: '',
      tableData: [],
      homeData: {},
      monthly: [],
      orderList: [],
      monthlyOrderList: {}
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    homeData() {
      this.waitTo.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.homeData.waitingPickupRate * 0.01],
            color: ['#e35c3f'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#ffe5e0' // 背景色
            },
            label: {
              normal: {
                formatter: (this.homeData.waitingPickupRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#e35c3f'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#e35c3f'
                  }
                }
              }
            ]
          }
        ]
      })
      this.waitingDispatch.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.homeData.waitingDispatchRate * 0.01],
            color: ['#ffc45e'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#fff1d9' // 背景色
            },
            label: {
              normal: {
                formatter: (this.homeData.waitingDispatchRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#ffc45e'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#ffc45e'
                  }
                }
              }
            ]
          }
        ]
      })
      this.unassignedTransport.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.homeData.unassignedTransportTaskRate * 0.01],
            color: ['#ff9b41'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#ffead7' // 背景色
            },
            label: {
              normal: {
                formatter: (this.homeData.unassignedTransportTaskRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#ff9b41'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#ff9b41'
                  }
                }
              }
            ]
          }
        ]
      })
      this.timeoutTransportTask.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.homeData.timeoutTransportTaskRate * 0.01],
            color: ['#eddd83'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#fafade' // 背景色
            },
            label: {
              normal: {
                formatter: (this.homeData.timeoutTransportTaskRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#eddd83'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#eddd83'
                  }
                }
              }
            ]
          }
        ]
      })
      this.taskInTransit.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.todayData.taskInTransitRate * 0.01],
            color: ['#e35c3f'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#ffe5e0' // 背景色
            },
            label: {
              normal: {
                formatter: (this.todayData.taskInTransitRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#e35c3f'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#e35c3f'
                  }
                }
              }
            ]
          }
        ]
      })
      this.taskInDelivery.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '50%'],
            data: [this.todayData.taskInDeliveryRate * 0.01],
            color: ['#ffc45e'],
            backgroundStyle: {
              borderWidth: 1,
              color: '#fff1d9' // 背景色
            },
            label: {
              normal: {
                formatter: (this.todayData.taskInDeliveryRate) + '%',
                textStyle: {
                  fontSize: 16
                },
                color: '#000'
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['70%', '72%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#ffc45e'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#ffc45e'
                  }
                }
              }
            ]
          }
        ]
      })
      this.allOrder.setOption({
        label: {
          normal: {
            fontSize: 25,
            show: false,
            position: 'top'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.monthly
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单总量',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            color: '#ffe5e0',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: false // 在折线拐点上显示数据
                },
                lineStyle: {
                  color: '#e15536',
                  width: 1, // 设置虚线宽度
                  type: 'solid' // 虚线'dotted' 实线'solid'
                }
              }
            },
            data: this.orderList
          }
        ]
      })
      this.orderForm.setOption({
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            type: 'bar',
            color: '#e15536',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          }
        ]
      })
    }

  },
  mounted() {
    echarts.registerMap('china', { geoJSON: chinaMap })
    this.date = this.$moment().format('YYYY-MM-DD HH:mm')
    this.waitTo = echarts.init(this.$refs.waitTo)
    this.waitingDispatch = echarts.init(this.$refs.waitingDispatch)
    this.unassignedTransport = echarts.init(this.$refs.unassignedTransport)
    this.timeoutTransportTask = echarts.init(this.$refs.timeoutTransportTask)
    this.taskInTransit = echarts.init(this.$refs.taskInTransit)
    this.taskInDelivery = echarts.init(this.$refs.taskInDelivery)
    this.allOrder = echarts.init(this.$refs.allOrder)
    this.orderForm = echarts.init(this.$refs.orderForm)
    this.lineChart = echarts.init(this.$refs.lineChart)
    this.initCharts()
  },
  async created() {
    const res = await getWorkspaceAPI()
    this.organOverview = res.data.data.organOverview
    console.log(res)
    this.todayData = res.data.data.todayData
    this.tableData = res.data.data.transportTaskList
    this.tableData.forEach(ele => {
      ele.status === 1 ? (ele.status = '已完成') : (ele.status = '进行中')
    })
    this.homeData = res.data.data.backlog
    this.monthlyOrderList = res.data.data.orderLineChart
    res.data.data.orderLineChart.monthlyOrderList.forEach(ele => {
      this.monthly.push(ele.dateTime)
      this.orderList.push(ele.orderNumber)
    })
  },
  methods: {
    initCharts() {
      const chinaGeoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        '吉林': [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        '辽宁': [123.1238, 42.1216],
        '河北': [114.4995, 38.1006],
        '天津': [117.4219, 39.4189],
        '山西': [112.3352, 37.9413],
        '陕西': [109.1162, 34.2004],
        '甘肃': [103.5901, 36.3043],
        '宁夏': [106.3586, 38.1775],
        '青海': [101.4038, 36.8207],
        '新疆': [87.9236, 43.5883],
        '西藏': [91.11, 29.97],
        '四川': [103.9526, 30.7617],
        '重庆': [108.384366, 30.439702],
        '山东': [117.1582, 36.8701],
        '河南': [113.4668, 34.6234],
        '江苏': [118.8062, 31.9208],
        '安徽': [117.29, 32.0581],
        '湖北': [114.3896, 30.6628],
        '浙江': [119.5313, 29.8773],
        '福建': [119.4543, 25.9222],
        '江西': [116.0046, 28.6633],
        '湖南': [113.0823, 28.2568],
        '贵州': [106.6992, 26.7682],
        '云南': [102.9199, 25.4663],
        '广东': [113.12244, 23.009505],
        '广西': [108.479, 23.1152],
        '海南': [110.3893, 19.8516],
        '上海': [121.4648, 31.2891]
      }
      const chinaDatas = [
        [{
          name: '黑龙江',
          value: 0
        }],	[{
          name: '内蒙古',
          value: 0
        }],	[{
          name: '吉林',
          value: 0
        }],	[{
          name: '辽宁',
          value: 0
        }],	[{
          name: '河北',
          value: 0
        }],	[{
          name: '天津',
          value: 0
        }],	[{
          name: '山西',
          value: 0
        }],	[{
          name: '陕西',
          value: 0
        }],	[{
          name: '甘肃',
          value: 0
        }],	[{
          name: '宁夏',
          value: 0
        }],	[{
          name: '青海',
          value: 0
        }],	[{
          name: '新疆',
          value: 0
        }], [{
          name: '西藏',
          value: 0
        }],	[{
          name: '四川',
          value: 0
        }],	[{
          name: '重庆',
          value: 0
        }],	[{
          name: '山东',
          value: 0
        }],	[{
          name: '河南',
          value: 0
        }],	[{
          name: '江苏',
          value: 0
        }],	[{
          name: '安徽',
          value: 0
        }],	[{ name: '湖北',
          value: 0
        }],	[{
          name: '浙江',
          value: 0
        }],	[{
          name: '福建',
          value: 0
        }],	[{
          name: '江西',
          value: 0
        }],	[{
          name: '湖南',
          value: 0
        }],	[{
          name: '贵州',
          value: 0
        }], [{
          name: '广西',
          value: 0
        }],	[{
          name: '海南',
          value: 0
        }],	[{
          name: '上海',
          value: 1
        }]
      ]

      const convertData = function(data) {
        const res = []
        for (let i = 0; i < data.length; i++) {
          const dataItem = data[i]
          const fromCoord = chinaGeoCoordMap[dataItem[0].name]
          const toCoord = [109.1162, 34.2004]
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord
            }])
          }
        }
        return res
      }
      const series = [];
      [['北京市', chinaDatas]].forEach(function(item, i) {
        // console.log('convertData(item[1])  ----->  ', convertData(item[1]));

        series.push({
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6, // 箭头指向速度，值越小速度越快
            trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', // 箭头图标
            symbolSize: 5 // 图标大小
          },
          lineStyle: {
            normal: {
              // width: 1, // 尾迹线条宽度
              opacity: 1, // 尾迹线条透明度
              curveness: 0.3 // 尾迹线条曲直度
            }
          },
          data: convertData(item[1])
          // data:
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: { // 涟漪特效
            period: 2, // 动画时间，值越小速度越快
            brushType: 'fill', // 波纹绘制方式 stroke, fill
            scale: 2 // 波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', // 显示位置
              offset: [5, 0], // 偏移设置
              formatter: function(params) { // 圆环显示文字
                return params.data.name
              },
              fontSize: 13
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            return 5 + val[2] * 5 // 圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#f00'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            }
          })
        },
        // 被攻击点
        {
          // type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              // offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: '#0f0'
              }
            },
            emphasis: {
              show: true,
              color: '#f60'
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10])
          }]
        }
        )
      })

      this.lineChart.setOption({
        tooltip: {
          trigger: 'item',
          backgroundColor: '#fff',
          borderColor: '#FFFF',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function(params, ticket, callback) {
            // 根据业务自己拓展要显示的内容
            let res = ''
            const name = params.name
            const value = params.value[params.seriesIndex + 1]
            res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
            return res
          }
        },
        backgroundColor: '#fff',
        visualMap: { // 图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: true,
          color: ['#d14740'],
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false, // 是否允许缩放
          itemStyle: {
            normal: {
              color: 'rgba(51, 69, 89, .5)', // 地图背景色
              borderColor: '#516a89', // 省市边界线00fcff 516a89
              borderWidth: 1
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)' // 悬浮背景
            }
          }
        },
        series: series
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-card {
  margin: 5px;
}
.right {
  display: flex;
}
.flex {
  display: flex;
  flex-direction: column;
flex-wrap: wrap;
align-content: center;
width: 190px;
height: 120px;
margin: 10px;
background-color: #fafafb;
}
.distributeBtn{
    font-size: 14px;
    color: #e15536;
    width: 158px;
    height: 40px;
    background: #ffeeeb;
    border: 1px solid #f3917c;
    border-radius: 4px;
    cursor: pointer;
}
h2{
  color: red;
}
.redBtn:hover{
  color: red;
}
</style>
